<script setup>
import {TresCanvas, useRenderLoop} from "@tresjs/core";
import {OrbitControls, Html} from "@tresjs/cientos";
import {NoToneMapping, SRGBColorSpace} from "three";
import {ref} from "vue";
import LoginPage from "@/pages/LoginPage/LoginPage.vue";
import Picture from "@/pages/LoginPage/Picture.vue";

const gl = {
  clearColor: "#000000",
  shadows: true,
  alpha: false,
  outputColorSpace: SRGBColorSpace,
  toneMapping: NoToneMapping
}

const para = {
  count: 1000,
  size: 0.2,
  color: "#789977"
}
const initSky = () => {
  const vertices = new Float32Array(para.count * 3)
  for (let i = 0; i < para.count; i++) {
    const i3 = i * 3
    vertices[i3] = (Math.random() - 0.5) * 90
    vertices[i3 + 1] = (Math.random() - 0.5) * 90
    vertices[i3 + 2] = (Math.random() - 0.5) * 90
  }
  return vertices
}
let position = ref('')
position.value = initSky()
const {onLoop} = useRenderLoop()
const MySky = ref(null)
onLoop(({delta}) => {
  if (MySky.value) {
    MySky.value.rotation.y -= delta * 0.1
  }
})
</script>

<template>
  <TresCanvas
      window-size
      v-bind="gl">
    <TresPerspectiveCamera
        :position="[0,0,20]"
        :look-at="[0,0,0]"/>
    <OrbitControls/>
    <TresAmbientLight intensity="0.5"/>
    <TresDirectionalLight
        :position="[1,1,1]"
        intensity="1"/>
    <TresPoints ref="MySky">
      <TresBufferGeometry
          :position="[position,3]"
      />
      <TresPointsMaterial
          :color="para.color"
          :size="para.size"/>
    </TresPoints>
    <Html
        center
        transform
        :distance-factor="10"
        :position="[0,0,0]"
        :scale="[0.75,0.75,0.75]"
    >
    <LoginPage/>
    </Html>
    <Html
        center
        transform
        :distance-factor="10"
        :position="[0,0,-0.01]"
        :scale="[0.75,0.75,0.75]"
    >
    <Picture/>

    </Html>

  </TresCanvas>

</template>

<style scoped>

</style>
